<template>
	<view >
		<view>
			<view style="margin-top:50rpx;">

				<view class="classAttendanceWrap">
					<view
						:class="[item.status=='已点'?'classAttendence0':(item.status=='未点'?'classAttendence1':'classAttendence2')]"
						v-for="(item,index) in classArr" :key="index" @click="manageSkip(item)">
						<view class="classAttendenceFont">
							<view style="font-size: 32rpx; ">{{item.className}}</view>
							<view v-if="item.status=='差'" style="font-size: 24rpx;">
								<view v-if="item.lateCount>0">
									迟到 {{item.lateCount}}人
								</view>
								<view v-if="item.dvCount>0">
									违纪 {{item.dvCount}} 人
								</view>
							</view>
							<view v-else style="font-size: 28rpx;margin-top:10rpx">{{item.status}}</view>
						</view>

					</view>
				</view>

			</view>
			<view class="logoSty" style="margin-bottom: 150rpx;"></view>
		</view>

		<my-bottom :bottomArr="attBottoms"></my-bottom>


	</view>
</template>

<script>
	import topCom from '../component/topCom.vue'
	import bottomCom from '../component/bottom.vue'
	export default {
		name: 'managementIndex',
		data() {
			return {
				classDeptId: '',
				topName: '班级考勤',
				userName: '启蒙星',
				classArr: [{
					class: "Y34",
					status: "已点",
					principle: '',
					arrived: "",
				}, {
					class: "Y36",
					status: "未点",
					principle: '',
					arrived: "",
				}, {
					class: "Y38",
					status: "已点",
					principle: '',
					arrived: "",
				}, {
					class: "Y39",
					status: "差",
					principle: '违纪1人',
					arrived: "未到1人",
				}, {
					class: "Y40",
					status: "已点",
					principle: '',
					arrived: "",
				}, {
					class: "Y41",
					status: "已点",
					principle: '',
					arrived: "",
				}, ],
				attBottoms: [{
						name: 'home',
						icon: 'iconfont icon-yonghutongji',
						text: "考勤",
						path: '/pages/classManagement/classManagementAttendance'
					},
					{
						name: 'atttendance',
						icon: 'iconfont icon-saoba',
						text: "卫生",
						path: '/pages/classManagement/classManageHealth'
					},
					{
						name: 'maintenance',
						icon: 'iconfont icon-baoxiu',
						text: "报修",
						path: '/pages/classManagement/classManageMaintence'
					}
				],
				timeSlot: 1,
			}
		},
		components: {
			topCom,
			bottomCom,
		},
		onLoad(options) {
			this.classDeptId = options.classDeptId
		},
		mounted() {
			this.attBottoms[0].path = `/pages/classManagement/classManagementAttendance?classDeptId=${this.classDeptId}`
			this.attBottoms[1].path = `/pages/classManagement/classManageHealth?classDeptId=${this.classDeptId}`
			this.attBottoms[2].path = `/pages/classManagement/classManageMaintence?classDeptId=${this.classDeptId}`
			this.getAppClassDeptAccDvByDeptId()

		},
		methods: {
			getAppClassDeptAccDvByDeptId() {
				let timeNow = new Date();
				// 获取当前小时
				let hours = timeNow.getHours();
				// 判断当前时间段
				if (hours >= 0 && hours <= 12) {
					this.timeSlot = 1
				} else if (hours > 12 && hours <= 18) {
					this.timeSlot = 2
				} else if (hours > 18 && hours <= 24) {
					this.timeSlot = 3
				}
				this.$api.classManage.getAppClassDeptAccDvByDeptId(this.classDeptId, this.$date, this.timeSlot).then(
					res => {
						this.classArr = res.data
						this.classArr.forEach((item, index) => {
							if (item.attenceTotal == 0) {
								item.status = "未点"
							} else if (item.attenceTotal == ((item.normalCount + item.leaveCount))) {
								item.status = "已点"
							} else {
								item.status = "差"
							}
						})
					})
			},
			manageSkip(item) {
				let timeNow = new Date();
				// 获取当前小时
				let hours = timeNow.getHours();
				// 判断当前时间段
				if (hours >= 0 && hours <= 12) {
					uni.navigateTo({
						url: `/pages/classManagement/classManageAttendanceDetail?classId=${item.classId}&className=${item.className}&classDeptId=${this.classDeptId}&timeSlot=1`
					})
				} else if (hours > 12 && hours <= 18) {
					uni.navigateTo({
						url: `/pages/classManagement/classManageAttendanceDetail?classId=${item.classId}&className=${item.className}&classDeptId=${this.classDeptId}&timeSlot=2`
					})
				} else if (hours > 18 && hours <= 24) {
					uni.navigateTo({
						url: `/pages/classManagement/classManageAttendanceDetail?classId=${item.classId}&className=${item.className}&classDeptId=${this.classDeptId}&timeSlot=3`
					})
				}

			}
		}
	}
</script>

<style>
	.classAttendenceFont {
		color: white;
		text-align: center;
		margin-top: 40rpx;

	}

	.classAttendanceWrap {
		width: 720rpx;
		margin-top: 20rpx;
		display: flex;
		justify-content: space-around;
		align-content: space-between;
		flex-direction: row;
		flex-wrap: wrap;

	}

	.classAttendence0 {
		width: 23%;
		height: 180rpx;
		background-image: url("https://tj-1305380059.cos.ap-nanjing.myqcloud.com/pic/001.png");
		background-size: 100%;
		background-repeat: no-repeat;
		margin-top: 20rpx;
	}

	.classAttendence1 {
		width: 23%;
		height: 180rpx;
		background-image: url("https://tj-1305380059.cos.ap-nanjing.myqcloud.com/pic/001.png");
		background-size: 100%;
		background-repeat: no-repeat;
		margin-top: 20rpx;
	}

	.classAttendence1 {
		width: 23%;
		height: 180rpx;
		background-image: url(https://tj-1305380059.cos.ap-nanjing.myqcloud.com/pic/004.png);
		background-size: 100%;
		background-repeat: no-repeat;
		margin-top: 20rpx;
	}

	.classAttendence2 {
		width: 23%;
		height: 180rpx;
		background-image: url(https://tj-1305380059.cos.ap-nanjing.myqcloud.com/pic/tubiao-010.png);
		background-size: 100%;
		background-repeat: no-repeat;
		margin-top: 20rpx;
	}

	.manageSearch {
		width: 650rpx;
		height: 50rpx;
		border: solid 2px #C0C0C0;
		border-radius: 20rpx;
		margin: auto;
		text-align: right;
		padding-right: 10rpx;
		font-size: 24rpx;
	}

	.indexContent {
		height: unset !important;

	}
</style>
